<template lang="">
  <div class="page" @click="clickAction(id)">
    <div class="img"><img :src="shopurl" alt="商铺图片"></div>
    <div class="div1">
      <span>品牌</span>
      <span class="s1">{{title}}</span>
      <div class="div1_1">
        <van-rate v-model="pingfen" allow-half void-icon="star" void-color="#eee" color="#ffd21e" :size="8" readonly />
        <span>{{pingfen}}</span>
        <span>月售{{monthShow}}单</span>
      </div>
      <div class="div1_2">
        <span>￥{{qison}}起送</span>
        <span>/ 配送费约￥{{peisonfei}}</span>
      </div>

    </div>
    <div class="div2">
      <span class="span">{{icon_name1}}</span>
      <span class="span">{{icon_name2}}</span>
      <span class="span">{{icon_name3}}</span>
      <div class="div2_1">
        <span class="particular">蜂鸟专送</span>
        <span>准时达</span>
      </div>
      <div class="div2_2">
        <span>{{distance}} / </span>
        <span class="span1">{{peisonshijian}}</span>
      </div>

    </div>

  </div>
</template>
<script>
  export default {
    name: "SmallShop",
    props: ['title', 'pingfen', 'shopurl', 'monthShow', 'qison', 'peisonfei', 'distance', 'peisonshijian', 'icon_name1', 'icon_name2', 'icon_name3', 'id'],
    methods: {
      clickAction(index) {
        let latitude = this.$router.history.current.query.latitude;
        let longitude = this.$router.history.current.query.longitude;
        this.$router.push({ name: 'ShowShopsL', query: { latitude: latitude, longitude: longitude, id: index } })
      }
    },
  }
</script>

<style lang="less" scoped>
  .page {
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    padding: 15px 5px;
  }

  .img {
    width: 60px;
    height: 60px;
    float: left;
    margin-left: 5px;
  }

  .img img {
    width: 60px;
    height: 60px;
  }

  .div1 {
    overflow: hidden;
    float: left;
    margin-left: 5px;
  }

  .div1 span:nth-of-type(1) {
    background-color: gold;
    color: black;
    font-size: 8px;
    padding: 1px;
  }

  .div1 .s1 {
    font-size: 15px;
    font-weight: 600;
    margin-left: 5px;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }

  .div1_1 {
    margin-top: 5px;
  }

  .div1_1 span:nth-of-type(1) {
    font-size: 5px;
    margin-left: 5px;
    color: rgb(255, 154, 13);
    background-color: white;
  }

  .div1_1 span:nth-of-type(2) {
    font-size: 5px;
    margin-left: 5px;
    font-weight: normal;
    color: gray;
  }

  .div1_2 {
    margin-top: 5px;
    margin-left: 6px;
  }

  .div1_2 span:nth-of-type(1) {
    font-size: 5px;
    margin-left: 5px;
    color: gray;
    background-color: white;
  }

  .div1_2 span:nth-of-type(2) {
    font-size: 8px;
    margin-left: 5px;
    color: gray;
    font-weight: normal;
  }

  .div2 {
    overflow: hidden;
    text-align: right;
    float: right;
    margin-right: 3px;
  }

  .div2 .span {
    border: 1px solid #ccc;
    color: rgba(41, 8, 8, 0.667);
    font-size: 10px;
    color: gray;
  }

  .div2 .div2_1 {
    font-size: 5px;
    margin-top: 6px;
    color: gray;
  }

  .div2_1 span:nth-of-type(1) {
    background-color: rgb(49, 144, 232);
    color: white;
    border: 1px solid rgb(49, 144, 232);
  }

  .div2_1 span:nth-of-type(2) {
    color: rgb(49, 144, 232);
    border: 1px solid rgb(49, 144, 232);
  }

  .div2 .div2_2 {
    font-size: 5px;
    margin-top: 10px;
    color: gray;
  }

  .div2_2 .span1 {
    color: rgb(49, 144, 232);
  }
</style>